嗨大家好，我是Eric，今天我想跟大家聊聊在學習 JavaScript 前必須要了解一個水很深的原理，就是 "Event Loop"（事件迴圈）。

為什麼我們前端需要了解這個看似很底層的 事件迴圈（Event Loop）呢？
答案其實很簡單：因為它影響著我們網頁的效能和用戶體驗。

我們新手可能都有過一個的經驗？就是當在瀏覽器中打開一個網頁，突然整個頁面卡住了，甚至有時瀏覽器會完全當機。其中一個可能的原因就是 Event Loop 被某個長時間運行的Task塞住了。
如果你了解 Event Loop 的運作機制，就能優化程式碼，避免這種情況發生。

// 阻塞 Event Loop 的好方式 XD
while(true) {
  // 無限迴圈會讓你的網頁掛掉
}

什麼是進程（Process）和線程（Thread）？
首先，讓我們來了解什麼是「進程」和「線程」。傳統上，一個應用程式（像是瀏覽器）至少有一個進程。每個進程有自己獨立的記憶體空間，它們不會亂入到別人的區域 XD。

然後每個進程至少有一個「線程」，也就是執行 code 的那個家伙。主線程是進程啟動後自動創建的第一個線程。如果你的應用程式需要多任務，主線程會創建更多的線程來幫忙。

// 假設這是你的主線程
function mainThread() {
  console.log("Hello, I am the main thread!");
}

瀏覽器的進程和線程
瀏覽器是一個非常複雜的應用程式，它有多個進程和線程。為了避免互相干擾，瀏覽器會啟動多個進程，像是：

Browser Process（瀏覽器進程）: 主要負責畫面顯示、User交互等。
Network Process（網絡進程）: 負責處理網絡請求request。
Renderer Process（渲染進程）: 這是今天的重點，它會啟動一個主線程來執行 HTML、CSS和 JavaScript。
舉例：在Chrome的「任務管理器」裡，你甚至可以看到所有進程和線程。
Chrome的「任務管理器」:https://zhtw.eyewated.com/%E5%A6%82%E4%BD%95%E4%BD%BF%E7%94%A8google-chrome%E4%BB%BB%E5%8B%99%E7%AE%A1%E7%90%86%E5%99%A8/

渲染主線程（Main Thread in Renderer Process）
這個主線程非常忙，它需要做很多事，比如解析HTML和CSS，處理JS，執行事件處理函數，還要每秒畫60次畫面！呼，真的是超級忙碌。

// 渲染主線程做的事情
function renderMainThread() {
  parseHTML();
  parseCSS();
  executeJS();
  // ...更多任務
}

這麼多任務怎麼辦呢？接著我們會在下一部分（下集）講解事件迴圈（Event Loop）是如何解決這個問題的。

參考資料：https://yeefun.github.io/event-loop-in-depth/